---
type: tutorial
title: 첫 번째 Astro 프로젝트 만들기
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — Astro 튜토리얼을 위한 새 프로젝트를 생성하고 코딩 준비
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - `create astro` 설정 마법사를 실행하여 새로운 Astro 프로젝트를 생성하세요.
  - 개발 (dev) 모드에서 Astro 서버를 시작하세요.
  - 브라우저에서 웹사이트의 실시간 미리보기를 확인하세요.
</PreCheck>

## Astro 설정 마법사 실행

새로운 Astro 사이트를 생성하는 가장 좋은 방법은 `create astro` 설정 마법사를 이용하는 것입니다.

<Steps>
1. 터미널의 명령줄에서 원하는 패키지 관리자를 사용하여 다음 명령을 실행합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      #  npm으로 새 프로젝트를 만듭니다
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      #  pnpm으로 새 프로젝트를 만듭니다
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      #  yarn으로 새 프로젝트를 만듭니다
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. `create-astro`를 설치하려면 `y`를 입력하세요.

3. 프롬프트가 "Where would you like to create your new project?" 라고 묻는다면 프로젝트의 새로운 디렉터리를 생성하기 위해 폴더의 이름을 입력하세요. (예: `./tutorial`)

    :::note
    새로운 Astro 프로젝트는 완전히 비어 있는 폴더에서만 생성할 수 있으므로, 아직 존재하지 않는 폴더 이름을 선택하세요!
    :::

4. 선택할 수 있는 시작 템플릿의 짧은 목록이 표시됩니다. 화살표 키 (위쪽 및 아래)를 사용하여 "Empty" 템플릿으로 이동한 다음 return (enter) 키를 눌러 선택 사항을 제출합니다.

5. TypeScript를 작성할 계획인지 묻는 메시지가 나타나면 `n`을 입력하세요.

6. "Would you like to install dependencies?" 라는 메시지가 표시되면 `y`를 입력하세요.

7. "Would you like to initialize a new git repository?" 라는 메시지가 표시되면 `y`를 입력하세요.
</Steps>

설치 마법사가 완료되면 더 이상 이 터미널이 필요하지 않습니다. 이제 VS Code를 열어 계속 작업할 수 있습니다.

## VS Code에서 프로젝트 실행

<Steps>
8. VS Code를 실행합니다. 폴더를 열라는 메시지가 표시됩니다. 설정 마법사로 생성한 폴더를 선택합니다.

9. Astro 프로젝트를 처음 여는 경우 권장 확장 프로그램을 설치할 것인지 묻는 알림이 표시됩니다. 클릭하여 권장 확장을 확인하고 [Astro 언어 지원 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 선택하세요. 이는 Astro 코드에 대한 구문 강조 및 자동 완성 기능을 제공합니다.

10. 터미널이 표시되고 다음과 같은 명령 프롬프트가 표시되는지 확인합니다.

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[키보드 단축키]
    터미널을 열고 닫으려면 <kbd>Ctrl + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>)를 사용하세요.
    :::
</Steps>

이제 이 튜토리얼의 나머지 부분에서 컴퓨터의 터미널 앱 대신 이 창에서 바로 내장된 터미널을 사용할 수 있습니다.

## Astro를 개발 모드로 실행

작업하는 동안 프로젝트 파일을 _웹사이트로_ 미리 보려면 Astro가 개발 (dev) 모드에서 실행되어야 합니다.

### 개발 서버 시작

<Steps>

11. VS Code 터미널에 다음 명령을 입력하여 Astro 개발 서버를 시작하는 명령을 실행하세요.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    이제 Astro가 개발 모드에서 실행되고 있다는 확인이 터미널에 표시됩니다. 🚀
</Steps>

## 웹사이트 미리보기

프로젝트 파일에는 Astro 웹사이트를 표시하는 데 필요한 모든 코드가 포함되어 있지만 브라우저는 코드를 웹페이지로 표시하는 역할을 담당합니다.

<Steps>

12. 터미널 창에서 `localhost` 링크를 클릭하여 새로운 Astro 웹사이트의 실시간 미리보기를 확인하세요!

    (Astro는 `4321` 포트를 사용할 수 있는 경우 기본적으로 `http://localhost:4321`을 사용합니다.)

    Astro "Empty Project" 시작 웹사이트는 브라우저 미리보기에서 다음과 같이 보여야 합니다.

    ![상단에 Astro라는 단어가 있는 빈 흰색 페이지.](/tutorial/minimal.png)

</Steps>

:::tip[Astro 개발 서버 사용]

Astro 서버가 개발 모드에서 실행되는 동안에는 터미널 창에서 명령을 실행할 수 없습니다. 대신 이 창에서는 사이트를 미리 볼 때 피드백을 제공합니다.

언제든지 개발 서버를 중지하고 터미널에 <kbd>Ctrl + C</kbd>를 입력하여 명령 프롬프트로 돌아갈 수 있습니다.

때로는 작업하는 동안 개발 서버가 자체적으로 중지되는 경우가 있습니다. 실시간 미리보기가 작동을 멈추면 터미널로 돌아가서 `npm run dev`를 입력하여 개발 서버를 다시 시작하세요.
:::

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] 새로운 Astro 프로젝트를 만들 수 있습니다.
- [ ] Astro 개발 서버를 시작할 수 있습니다.
</Checklist>
</Box>

### 추가 자료

- <p>[Visual Studio Code 시작하기](https://code.visualstudio.com/docs/introvideos/basics) <Badge>외부 링크</Badge> — VS Code 설치, 설정, 작업에 대한 비디오 자습서</p>
